import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { Body, _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { ACLService } from '@delon/acl';
import { STData } from '@delon/abc';
declare var QRCode
import  html2canvas  from 'html2canvas'
import { WatchBindPersonListComponent } from '../watch-bind-person-list/watch-bind-person-list.component';
@Component({
  selector: 'app-qrcode-list',
  templateUrl: './qrcode-list.component.html',
  styles: []
})
export class QrcodelISTComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  addFlag:boolean = this.aclService.canAbility("qrcode-list/addBatch")
  selectData: any;
  loading = false;
  addUserInfo = {
    userAccount: '',
    userPassword: '',
    userName: '',
    roles: [],
    depts: []
  };
  config: SPage = {
    columns: [
      {
        index: 'qrCode',
        title: '二维码SN',
      },
      // {
      //   index: 'qrCodeDetails',
      //   title: '二维码信息',
      //   fFn(item, columu) {
      //     let urlStr=""
      //     if(item.type == 1){
      //       urlStr = "https://xtxspmj.com/miniprogram/callPersonList?address="+item.qrCode+"&type=1"
      //     }else if(item.type == 2){
      //       urlStr = "https://xtxspmj.com/miniprogram/callVillagePersonList?address="+item.qrCode+"&type=2"
      //     }
      //     return urlStr
      //   },
      // },
      {
        index: 'description',
        title: '描述',
      },
     
      {
        index: 'type',
        title: '类型',
        type:ColumnType.tag,
        tag:{
          1:{text: '出入口'},
          2:{text: '小区'}
        },
        filter: {
          placeholder: '请选择二维码类型',
          type: 'select',
          items:[
            {label:"出入口",value:1},
            {label:"小区",value:2}
          ]
        }
      },
      {
        index: 'ownerName',
        title: '所属合作商',
      },
      {
        index: 'areaName',
        title: '安装位置',
        filter: {
          index:'qrCodePlace',
          placeholder: '请输入安装位置',
          type: 'string'
        }
      },
      // {
      //   index: 'status',
      //   title: '状态',
      //   type:ColumnType.tag,
      //   tag:{
      //     true:{text:"已使用"},
      //     false:{text:"未使用"}
      //   },
      //   filter: {
      //     placeholder: '请选择状态',
      //     type: 'select',
      //     items:[
      //       {label:"已使用",value:true},
      //       {label:"未使用",value:false}
      //     ]
      //   }
      // },
      // {
      //   index: 'createTime',
      //   title: '生成时间',
      //   filter: {
      //     index:'createTime',
      //     placeholder: '生成时间',
      //     type: 'date'
      //   }
      // },
      {
        index: '',
        title: '操作',
        fixed:'right',
        width:200,
        buttons:[
          {
            text:'查看人员',
            iif:(data)=>{
              return data.type == 1
            },
            click:(_record)=>{
              this.watchPersonList(_record)
            }
          },
          {
            text:'查看二维码',
            click:(_record)=>{
              this.watchQRCode(_record)
            }
          },
        ]
      },
    ],
    showCheckBox: false,
    reqUrl:'/core/qrcode/page',
    defaultParam:{order: "createTime desc"}
    // editBtn: [
    //   { title: '详情' },
    //   // {title: '禁用'},
    //   // {title: '责任人'},
    //   {title: '绑定',
    //   iif: (data: STData) => {
    //     return data.deviceLocationStatus == 0
    //   } }
    // ]
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService, private message: NzMessageService, private aclService: ACLService) { }
  
  ngOnInit() {
  }

  watchQRCode(data):void{
    let urlStr=""
    if(data.type == 1){
      urlStr = "https://xtxspmj.com/miniprogram/callPersonList?address="+data.qrCode+"&type=1"
    }else if(data.type == 2){
      urlStr = "https://xtxspmj.com/miniprogram/callVillagePersonList?address="+data.qrCode+"&type=2"
    }
    const modal = this.modal.create({
      nzTitle: '二维码',
      nzContent: '<div class="imgDiv"><div class="qrcode" id="imgDiv"></div></div>',
      nzWidth: 400,
      nzFooter: [
        {
          label:"下载二维码",
          type:"primary",
          onClick:()=>{
            const scale = window.devicePixelRatio
            const width = (document.querySelector(".imgDiv") as HTMLDivElement).offsetWidth 
            const height = (document.querySelector(".imgDiv") as HTMLDivElement).offsetHeight
            let dom:any=document.querySelector(".imgDiv")
            html2canvas(dom,{
              scale,
              width:width,
              height:height,
              useCORS:true
            }).then(canvas => {
              let dataURL = canvas.toDataURL("image/png")
              if (dataURL !== "") {
                let a = document.createElement('a')
                a.download = "二维码.jpg";
                a.href = dataURL;
                a.click()
              }
            })
          }
        }
      ],
    })
    modal.afterOpen.subscribe(()=>{
      new QRCode(document.getElementsByClassName("qrcode")[0],{
        width:350,
        height:350
      }).makeCode(urlStr);
    })
  }

  // 编辑功能开始
  editDic(type: 0 | 1 = 0, _param?: object): void {
    console.log(type);
    const title = type ? '设备详情':'新增设备';
    const modal = this.modal.create({
      nzTitle: title,
      nzContent: "",
      nzWidth: 1300,
      nzComponentParams: {
        type,
        _param
      },
      nzOnOk: () => {
        this.st.reload();
      },
      nzFooter: null
    })
    modal.afterClose.subscribe(res => {
      if (res === 'ok') {
        this.st.reload();
      }
    })
  }

  operate(e: any): void {
    if (e.title === '详情') {
      this.editDic(1, e.data);
    }
  }
  _console(e: any): void {
    this.selectData = e;
  }
  dataProcess(data: STData[]){
  
    return data;
  }

  watchPersonList(_param):void{
    const modal = this.modal.create({
      nzTitle: "已绑定人员列表",
      nzContent: WatchBindPersonListComponent,
      nzWidth: 1300,
      nzComponentParams: {
        _param
      },
      nzOnOk: () => {
        // this.st.reload();
      },
      nzFooter: null
    })
    // modal.afterClose.subscribe(res => {
    //   if (res === 'ok') {
    //     this.st.reload();
    //   }
    // })
  }

 
 


     //导出
     export(){
      this.loading=true;
      let body:any={};
      if(this.st.st.req.params != undefined){
        body=this.st.st.req.params;
      }
      body.pageNum=1;
      body.pageSize=this.st.st.total;
      this.http.post(this.api.doorCard.queryPeopleCardInfo.url,body).subscribe(res => {
        this.loading=false;
        if(res.status == 200 && res.data.list.length > 0){
          let data=res.data.list;
           this.st.st.export(data,{
            filename : "二维码信息.xlsx"
          })
        }else{
          this.message.error(res.message);
        }
      })
    
  
    }

}
